<template>
  <div class="content">
    <div style="text-align:center">
      <span>学期：</span>
      <a-select v-model="currentSemester">
        <a-select-option v-for="(semester, index) in semesters" :value="semester" :key="index">
          {{ semester }}
        </a-select-option>
      </a-select>
      <a-input-number style="margin-left: 30px" :max="totalWeek" :min="1" v-model="startWeek"></a-input-number>
      ~
      <a-input-number :max="totalWeek" :min="1" v-model="endWeek"></a-input-number>
      周
      <a-select style="margin-left: 30px" :value="courseType" @change="changeCourseType">
        <a-select-option :value="0">
          所有课
        </a-select-option>
        <a-select-option :value="1">
          必修课
        </a-select-option>
        <a-select-option :value="2">
          专选课
        </a-select-option>
        <a-select-option :value="3">
          公选课
        </a-select-option>
      </a-select>
      <a-button style="margin-left: 50px" type="primary" @click="searchCourse">查询</a-button>
    </div>
    <br>
    <div id="table" class="content-content">
      <!--表头-->
      <a-row class="row">
        <a-col span="3" class="item"></a-col>
        <a-col class="item" span="3" v-for="(day, index) in days" :key="index">
          {{ day }}
        </a-col>
      </a-row>
      <!--表体-->
      <a-row class="row row-body" v-for="(time, index) in courseTime" :key="index">
        <a-col span="3" class="course-time">
          <p style="flex: 100%; min-width: 100%">第{{ index + 1 }}节课</p>
          <p>{{ time.start }}~{{ time.end }}</p>
        </a-col>
        <a-col span="3" class="body-item" v-for="(day, j) in days" :key="j">
          <template v-if="courseList">
            <a-popover v-for="(course, ci) in courseList[j][index]" :key="ci" :title="course.name">
              <template slot="content">
                <p>{{ course.duration }}周</p>
                <p>上课地点：{{ course.loc }}</p>
                <p>老师：{{ course.teacher }}</p>
                <a-tooltip placement="right">
                  <template slot="title">
                    添加提醒之后在上课前一天晚上十点会通过邮箱提醒
                  </template>
                  <a-button v-if="course.isRemind == 1" disabled>已添加提醒</a-button>
                  <a-button v-else @click="addRemind(course.id)">添加提醒</a-button>
                </a-tooltip>
              </template>
              <div class="course">
                <span class="course-item">{{ course.name }}</span>
                <span class="course-item">@{{ course.loc }}</span>
                <span class="course-item">{{ course.teacher }}</span>
              </div>
            </a-popover>
          </template>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import {addReminder} from "@/api/courses/reminder";
import getCourseList from "@/api/users/table";
import getCourseTime from "@/api/courses/courseTime";

export default {
  name: "courseTable",
  mounted() {
    this.loadCourseTime();
  },
  data() {
    return {
      days: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
      courseTime: [],
      currentSemester: "",
      totalWeek: 16,
      semesters: [],
      startWeek: 1,
      endWeek: 16,
      courseType: 0,
      courseList: false
    }
  },
  methods: {
    addRemind(courseId) {
      addReminder(courseId)
          .then(res => {
            if (res.result) {
              //成功后显示提醒并重新加载课表显示更新
              this.$message.success(`添加提醒成功`);
              this.loadCourse();
            } else {
              this.$message.error("添加提醒失败");
            }
          })
    },
    changeCourseType(courseType) {
      this.courseType = courseType;
    },
    changeSemester(semester) {
      this.currentSemester = semester;
    },
    searchCourse() {
      if (this.startWeek > this.endWeek) {
        this.$message.error("周数关系错误");
        return;
      }
      this.loadCourse();
    },
    loadCourse() {
      // 加载课表
      let self = this;
      getCourseList(self.courseType, self.currentSemester, self.startWeek, self.endWeek)
          .then(res => {
            if (res.result) {
              self.courseList = false;
              setTimeout(() => {
                self.courseList = res.data.classList;
              }, 100);
            } else {
              self.$message.error("课表加载失败");
            }
          })
    },
    loadCourseTime() {
      // 加载上课时间
      let self = this;
      getCourseTime().then(response => {
        if (response.total > 0) {
          self.courseTime = response.times;
          self.currentSemester = response.currentSemester;
          self.totalWeek = response.totalWeek;
          self.semesters = response.semesters;
          self.endWeek = self.totalWeek;
          // 加载课表
          self.loadCourse();
        } else {
          self.$message.error(response.msg);
        }
      })
    },
  }
}
</script>

<style scoped>
.row {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding-top: 5px;
  padding-bottom: 5px;
}

.course-time {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: auto;
  text-align: center;
}

.row-body {
  display: flex;
}

.item {
  border-left: 1px solid #ddd;
}

.body-item {
  border-left: 1px solid #ddd;
  min-height: 4rem;
  height: auto;
}

.course {
  display: flex;
  margin-top: 5px;
  background-color: #66CCFF;
  padding: 3px 10px;
  flex-wrap: wrap;
  font-size: small;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}

.course-item {
  flex: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.print-table {
  font-size: small;
  cursor: pointer;
  margin-left: 10px;
  color: blue;
}

</style>